<template>
    <div>
        <h2>添加(注册)新用户</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">用户名</td>
                    <td>
                        <input type="text" v-model="info.UserName">
                    </td>
                </tr>
                <tr>
                    <td align="right">密碼</td>
                    <td>
                        <input type="password" v-model="info.Password">
                    </td>
                </tr>
                <tr>
                    <td align="right">卡號</td>
                    <td>
                        <input type="text" v-model="info.CardNumber">
                    </td>
                </tr>
                <tr>
                    <td align="right">電話號碼</td>
                    <td>
                        <input type="text" maxlength="11" v-model="info.Phone">
                    </td>
                </tr>
                <tr>
                    <td align="right">图片</td>
                    <td>
                        <input type="file" @change="photo" >
                        <img :src="info.Images" width="100px"> 
                    </td>
                </tr>
                <tr>
                    <td align="right">可用餘額</td>
                    <td>
                        <input type="text" v-model="info.Money">
                    </td>
                </tr>
                <tr>
                    <td align="right">注冊時間</td>
                    <td>
                        <input type="date" v-model="info.StrDate">
                    </td>
                </tr>
                <tr>
                    <td align="right">性別</td>
                    <td>
                       
                        <input type="radio" name="sex" v-model="info.Sex"  :value="1">男
                        <input type="radio" name="sex" v-model="info.Sex" :value="0">女
                    </td>
                </tr>
                <tr>
                    <td align="right">权益</td>
                    <td>
                        <input type="checkbox" name="like" v-model="info.Equity" value="免费停车">免费停车
                        <input type="checkbox" name="like" v-model="info.Equity" value="免费早餐">免费早餐
                        <input type="checkbox" name="like" v-model="info.Equity" value="免费搓背">免费搓背
                        <input type="checkbox" name="like" v-model="info.Equity" value="免费暖被窝"> 免费暖被窝
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="注册" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { ref, reactive, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import axios from 'axios'
import moment from 'moment'

const router = useRouter();

let info: any = reactive({
    UserName: "",
    Password: "",
    CardNumber: "",
    Phone: "",
    Images: "",
    StrDate: "",
    Sex:null,
    IsDelete: false,
    Equity: []
})




const photo = (e: any) => {
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);

    axios({
        url: '/api/User/Imges',
        method: 'post',
        data: f
    })
        .then((res) => {
            if (res.data == "该文件不是图片,或不符合格式要求") {
                alert("该文件不是图片,或不符合格式要求");
                return;
            } else if (res.data == "文件大小超出2M") {
                alert("文件大小超出2M");
                return;
            } 
            info.Images = res.data;
        })
        .catch((err) => {
            console.log(err);
            return;
        })
}


const ok = () => {
    console.log(info);
    info.Equity=info.Equity.toString();
    axios({
        url: '/api/User/AddUsers',
        method: 'post',
        data: {
            
        }
    })
        .then((res) => {
            if (res.data > 0) {
                alert('注册成功!');
                router.push('/LoginView');
                return;
            }
            if (res.data == -1) {
                alert('该用户已存在');
                return;
            }
        })
        .catch((err) => {
            alert('失败');
            return;
        })
}

</script>

<style scoped></style>